<template>
  <div>
    <el-row>
      <el-col>
        <div class="ad">
          <img src="../assets/img/最顶上.jpg" />
        </div>
      </el-col>
    </el-row>
    <el-row class="navigation">
      <el-col :span="3" :offset="2" class="n1">正品保证，免息分期！</el-col>
      <el-col :span="1" :offset="9" class="n2">请登录</el-col>
      <el-col :span="3" class="n3">注册即送3500元大礼包</el-col>
      <el-col :span="1">|</el-col>
      <el-col :span="1" class="n2">购物车</el-col>
      <el-col :span="1" class="n4" ref="n4">
        <div>客户服务</div>
        <div class="kefu">
          <table>
            <tr>
              <td>客户顾问</td>
              <td>售后维修</td>
            </tr>
            <tr>
              <td>帮助中心</td>
              <td>办理信用卡</td>
            </tr>
          </table>
          <div class="nimg">
            <img src="../assets/img/横线.png" />
          </div>
          <div class="nd1">
           服务专线：400-883-2688
          </div>
          <div class="nd1">
           外呼号码：020-83930299
          </div>
        </div>
        <div class="bs"><img src="../assets/img/bs.png"/></div>
      </el-col>
      <el-col :span="1" class="n2">会员福利</el-col>
      <el-col :span="1">|</el-col>
      <el-col :span="1" class="n2">ENGLISH</el-col>
    </el-row>
    <el-row class="search">
      <el-col :span="2" :offset="2">
        <div class="logo">
          <img src="../assets/img/logo-icon.png" />
        </div>
      </el-col>
      <el-col :span="3">
        <div class="slogan">
          <img src="../assets/img/slogan.png"/>
        </div>
      </el-col>
      <el-col :span="9" :offset="2">
       <div class="srhzh">
          <div class=" loupe"></div>
          <img src="../assets/img/放大镜.png"/>
          <input placeholder="东方新" />
          <img class="bsloupe" src="../assets/img/bs.png"/>
          <button>搜索</button>
       </div>
      </el-col>
      <el-col :span="6">
        <div class="QRcode">
          <img src="../assets/img/wb二维码.png" />
        </div>
      </el-col>
    </el-row>
   <!--  <el-row class="navbar">
      <el-col :span="1" :offset="7" class="nb">男表</el-col>
      <el-col :span="1" class="nb">女表</el-col>
      <el-col :span="1" class="nb">品牌馆</el-col>
      <el-col :span="1" class="nb">秒杀</el-col>
      <el-col :span="1" class="nb">极速选表</el-col>
      <el-col :span="2" class="nb">体验中心</el-col>
      <el-col :span="1" class="nb">名匠维修</el-col>
      <el-col :span="2" class="nb">认证二手表</el-col>
      <el-col :span="1" class="nb">奢品共享</el-col>
      <el-col :span="2" class="nb">手表资讯</el-col>
    </el-row>

     <div class="block">
      <el-carousel  height="460px" :interval="5000" arrow="always">
            <el-carousel-item v-for="item in lantern" :key="item">
          <img class="imglt" :src="item" />
        </el-carousel-item>
      </el-carousel>
      </div>
   <div class="leftbar">
      <ul>
        <li class="l1">
         <span>全部商品</span>
        <img src="../assets/img/全部商品.png" />
        </li>
        <li class="a b">
          <span class="s1">顶级品牌</span>
          <span class="s2">/江诗丹顿 宝玑 积家</span>
        </li>
        <li class="a b">
          <span class="s1">奢华品牌</span>
          <span class="s2">/劳力士 欧米茄 万国</span>
        </li>
        <li class="a b">
          <span class="s1">高级品牌</span>
          <span class="s2">/浪琴 爱宝时 帝陀</span>
        </li>
        <li class="a b">
          <span class="s1">轻奢品牌</span>
          <span class="s2">/天梭 赫柏林 美度</span>
        </li>
        <li class="a b">
          <span class="s1">年轻潮牌</span>
          <span class="s2">/卡西欧 迪士尼 漫</span>
        </li>
        <li class="a b">
          <span class="s1">国产智能</span>
          <span class="s2">/飞亚达 海鸥 上海</span>
        </li>
        <li class="a b">
          <span class="s1">表带</span>
          <span class="s2">/积优 奇美拉 欧时浩</span>
        </li>
        <li class="b">
          <span class="s1">维修保养</span>
          <span class="s2">/配件更换</span>
        </li>
      </ul>
    </div> -->
  </div>
</template>

<script>
  import 'element-ui/lib/theme-chalk/display.css';
  export default {
    name: 'wbwTop',
    data() {

      return {

       /* lantern:[require("../assets/img/lantern4.jpg"), require("../assets/img/lantern3.jpg"), require("../assets/img/lantern2.jpg"),require("../assets/img/lantern1.jpg")] */
      }
    },
    components: {

    },
    methods: {

    },
    mounted() {
      document.querySelector(".n4").onmouseover = function() {
      document.querySelector(".kefu").style.cssText="display:block;"
      }
      document.querySelector(".n4").onmouseout = function() {
      document.querySelector(".kefu").style.cssText="display:none;"
      }
    }
  }
</script>

<style scoped="scoped">
  @import url("../assets/css/wbwTop.css")
</style>
